<template>
  <div class="container">
    <el-row :gutter="8">
      <el-col :span="6">
        <el-form-item label="船名">
          <selectDown
            v-model:modelData="data.vessel"
            placeholder="请输入后搜索"
            urlType="voyage"
            :option="initOption.cmOption"
            @getOption="getVesselData"
          >
          </selectDown>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="航次">
          <el-input v-model="data.voyage"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="提单号">
          <el-input v-model="data.blNo"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="订舱日期">
          <el-date-picker
            v-model="data.bookingDate"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="6">
        <el-form-item label="截关日期">
          <el-date-picker
            v-model="data.closingDate"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="开航日期">
          <el-date-picker
            v-model="data.etd"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="实际开航日">
          <el-date-picker
            v-model="data.atd"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="联系人">
          <!-- <selectDown
            v-model:modelData="data.bookingAgentLinkId"
            placeholder="请输入后搜索 "
            urlType="man"
            :option="$store.state.businessBaseData.userList"
          >
          </selectDown> -->
          <el-select v-model="data.bookingAgentLinkId" size="small">
            <el-option
              v-for="item in $store.state.businessBaseData.userList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="6">
        <el-form-item label="进仓编号">
          <el-input v-model="data.warehousingNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="申报日期">
          <el-date-picker
            v-model="data.customDate"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="订舱单位">
          <selectDown
            v-model:modelData="data.bookingAgentId"
            placeholder="请输入后搜索 "
            urlType="buenterprise"
            urlQueryData="订舱单位"
            :option="initOption.dcdwOption"
            :labelSpaceBetween="true"
          >
          </selectDown>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="6">
        <el-form-item label="船公司">
          <selectDown
            v-model:modelData="data.shipcompanyId"
            placeholder="请输入后搜索"
            urlType="buenterprise"
            urlQueryData="船公司"
            :option="initOption.cgsOption"
            @getOption="getVesselCompanyData"
            :labelSpaceBetween="true"
          >
          </selectDown>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="">
          <el-input v-model="data.shipcompanyName" disabled> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报关单号">
          <el-input v-model="data.customNo"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="6">
        <el-form-item label="报关行">
          <selectDown
            v-model:modelData="data.customsBrokerId"
            placeholder="请输入后搜索"
            urlType="buenterprise"
            urlQueryData="报关行"
            :option="initOption.bghOption"
            @getOption="getCustomsBrokerData"
            :labelSpaceBetween="true"
          >
          </selectDown>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="">
          <el-input v-model="data.customsBrokerName" disabled> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="仓库">
          <selectDown
            v-model:modelData="data.warehousingId"
            placeholder="请输入后搜索"
            urlType="buenterprise"
            urlQueryData="仓库"
            :option="initOption.ckOption"
            @getOption="getWarehousingData"
            :labelSpaceBetween="true"
          >
          </selectDown>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="">
          <el-input v-model="data.warehousingName" disabled> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="12">
        <el-form-item label="报关行备注">
          <el-input v-model="data.customMemo" type="textarea"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="仓库备注">
          <el-input v-model="data.warehousingMemo" type="textarea"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="8">
      <el-col :span="12">
        <el-form-item label="寄单地址">
          <el-input v-model="data.sendAddress" type="textarea"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="middle-box">
      <span class="title"> 箱数合计 </span>
      <span style="font-size: 16px; color: #999; margin-left: 10px">
        是否拼箱
      </span>
      <el-checkbox
        v-model="data.isLcl"
        true-label="1"
        false-label="0"
        size="small"
        >拼箱</el-checkbox
      >
    </div>

    <div class="boxSize">
      <div class="boxSize-box">
        <el-input
          style="width: 100px"
          v-model.number="data.ctn20"
          oninput="value=value.replace(/[^.0-9.]/g,'')"
          size="small"
        ></el-input>
        <span class="middle-icon"> x </span>
        <el-select
          v-model="data.ctn20Type"
          :loading="boxSizeSelectLoading"
          filterable
          size="small"
          class="box-select"
        >
          <el-option
            v-for="item in defaultBoxSizeOption"
            :key="item.id"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="boxSize-box">
        <el-input
          style="width: 100px"
          v-model.number="data.ctn40"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        ></el-input>
        <span class="middle-icon"> x </span>
        <el-select
          v-model="data.ctn40Type"
          :loading="boxSizeSelectLoading"
          filterable
          size="small"
          class="box-select"
        >
          <el-option
            v-for="item in defaultBoxSizeOption"
            :key="item.id"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="boxSize-box">
        <el-input
          style="width: 100px"
          v-model.number="data.ctn40h"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        ></el-input>
        <span class="middle-icon"> x </span>
        <el-select
          v-model="data.ctn40hType"
          :loading="boxSizeSelectLoading"
          filterable
          size="small"
          class="box-select"
        >
          <el-option
            v-for="item in defaultBoxSizeOption"
            :key="item.id"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="boxSize-box">
        <el-input
          style="width: 100px"
          v-model.number="data.ctn45"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        ></el-input>
        <span class="middle-icon"> x </span>
        <el-select
          v-model="data.ctn45Type"
          :loading="boxSizeSelectLoading"
          filterable
          size="small"
          class="box-select"
        >
          <el-option
            v-for="item in defaultBoxSizeOption"
            :key="item.id"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="addNewBox"> 装入 </el-button>
    </div>
    <el-row :gutter="8">
      <el-col :span="12">
        <el-form-item label="箱型描述">
          <el-input v-model="data.ctnMemo"> </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="箱号描述">
          <el-input v-model="data.ctnNoDesc" disabled> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <docDetailBoxTable
      class="table-box"
      v-model:detailData="data"
      :defaultBoxSizeOption="defaultBoxSizeOption"
    >
    </docDetailBoxTable>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import selectDown from "./selectDown.vue";
import docDetailBoxTable from "./docDetailBoxTable.vue";
import { ElMessage, ElMessageBox } from "element-plus";

export default defineComponent({
  components: {
    docDetailBoxTable,
    selectDown,
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {},
    },
    //初始化option
    initOption: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:detailData"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      defaultBoxSizeOption: [],
      boxSizeSelectLoading: false,
    };
  },
  methods: {
    getDefaultBoxSizeOption() {
      this.boxSizeSelectLoading = true;
      this.$http
        .get("/api/base/container/queryList", {
          KeyWords: "",
        })
        .then((res) => {
          this.defaultBoxSizeOption = res.map((item) => {
            return {
              id: item.id,
              value: item.ctnName,
              tareWeight: item.tareWeight,
            };
          });
        })
        .finally(() => {
          this.boxSizeSelectLoading = false;
        });
    },
    getVesselData(data) {
      this.data.voyage = data.voyage;
    },
    getVesselCompanyData(data) {
      console.log(data);
      this.data.shipcompanyId = data.id;
      this.data.shipcompanyName = data.rigthName;
    },
    getCustomsBrokerData(data) {
      this.data.customsBrokerName = data.rigthName;
      this.data.customsBrokerId = data.id;
    },
    getWarehousingData(data) {
      this.data.warehousingName = data.rigthName;
      this.data.warehousingId = data.id;
    },
    /**
     * 装入
     */
    addNewBox() {
      if (this.data.docWorkCtnList.length == 0) {
        this.pushTableData();
      } else {
        ElMessageBox.confirm("装箱表格存在数据，是否覆盖？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.pushTableData();
          })
          .catch(() => {});
      }
    },
    /**
     * 装入push数据
     */
    pushTableData() {
      this.data.docWorkCtnList = [];
      let inputArray = [];

      inputArray.push({
        len: this.data.ctn20 ?? undefined,
        key: this.data.ctn20Type,
      });
      inputArray.push({
        len: this.data.ctn40 ?? undefined,
        key: this.data.ctn40Type,
      });
      inputArray.push({
        len: this.data.ctn40h ?? undefined,
        key: this.data.ctn40hType,
      });
      inputArray.push({
        len: this.data.ctn45 ?? undefined,
        key: this.data.ctn45Type,
      });
      for (let item of inputArray) {
        let containerTareWeight = 1;
        for (const iterator of this.defaultBoxSizeOption) {
          if (iterator.value == item.key) {
            containerTareWeight = iterator.tareWeight;
            break;
          }
        }
        for (let i = 0; i < item.len; i++) {
          this.data.docWorkCtnList.push({
            docId: this.$route.query.id,
            ctnNo: "", //箱号
            ctnSeal: "", //封号
            containerCode: item.key, //箱型
            // containerTareWeight: 1, //箱皮重
            containerTareWeight: containerTareWeight, //箱皮重
            digit: 0, //件数
            grossWeight: 0, //毛重
            volume: 0, //体积
            vgmWeightType: "", //称重方式
            vgmWeight: "", //VGM总毛重
            vgmWeightTime: "", //称重时间
            packTime: "", //装箱日期
            packLinkman: "", //装箱联系人
            truckCode: "", //车队号
            truckName: "", //车队名
            numberplate: "", //车牌号
            driverMemo: "", //司机号码
          });
        }
      }
    },
    /**
     * 验证分票件数，毛重，体积
     */
    validChildData() {
      for (let item of this.data.docWorkCtnList) {
        if (item.docWorkCtnDetailList && item.docWorkCtnDetailList.length > 0) {
          let sumDigit = 0;
          let sumGrossWeight = 0;
          let sumVolume = 0;
          for (let inItem of item.docWorkCtnDetailList) {
            sumDigit += inItem.digit;
            sumGrossWeight += inItem.grossWeight;
            sumVolume += inItem.volume;
          }
          if (
            sumDigit == item.digit &&
            sumGrossWeight == item.grossWeight &&
            sumVolume == item.volume
          ) {
          } else {
            this.$message.error("件数，毛重，体积与装箱信息不一致，请检查!");
            return false;
          }
        }
      }
      return true;
    },
    /**
     * 验证箱数合计
     */
    validBoxTotle() {
      if (
        this.data.ctn20 == undefined &&
        this.data.ctn40 == undefined &&
        this.data.ctn40h == undefined &&
        this.data.ctn45 == undefined &&
        this.data.docWorkCtnList.length == 0
      ) {
        return true;
      }
      let boxTypeMap = new Map();
      this.data.docWorkCtnList.forEach((item) => {
        if (boxTypeMap.has(item.containerCode)) {
          boxTypeMap.set(
            item.containerCode,
            boxTypeMap.get(item.containerCode) + 1
          );
        } else {
          boxTypeMap.set(item.containerCode, 1);
        }
      });
      let boxTitleMap = new Map();
      boxTitleMap.set(this.data.ctn20Type, this.data.ctn20);
      boxTitleMap.set(this.data.ctn40Type, this.data.ctn40);
      boxTitleMap.set(this.data.ctn40hType, this.data.ctn40h);
      boxTitleMap.set(this.data.ctn45Type, this.data.ctn45);
      let deleteArray = [];
      for (let item of boxTitleMap.keys()) {
        if (boxTitleMap.get(item) == undefined) {
          deleteArray.push(item);
        }
      }
      for (let item of deleteArray) {
        boxTitleMap.delete(item);
      }
      return this.MapEqual(boxTitleMap, boxTypeMap);
    },
    /**
     * 判断两个Map是否全等
     * @param {*} map1
     * @param {*} map2
     */
    MapEqual(map1, map2) {
      if (map1.size !== map2.size) {
        return false;
      }
      for (let [key, value] of map1) {
        if (!map2.has(key) || map2.get(key) !== value) {
          return false;
        }
      }
      return true;
    },
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        let printArray = [];
        if (newVal.ctn20) {
          printArray.push(`${newVal.ctn20}X${newVal.ctn20Type}`);
        }
        if (newVal.ctn40) {
          printArray.push(`${newVal.ctn40}X${newVal.ctn40Type}`);
        }
        if (newVal.ctn40h) {
          printArray.push(`${newVal.ctn40h}X${newVal.ctn40hType}`);
        }
        if (newVal.ctn45) {
          printArray.push(`${newVal.ctn45}X${newVal.ctn45Type}`);
        }
        this.data.ctnMemo = printArray.join("+");
      },
      deep: true,
    },
    "data.ctn20Type"(newVal, oldVal) {
      if (newVal) {
        if (
          newVal == this.data.ctn40Type ||
          newVal == this.data.ctn40hType ||
          newVal == this.data.ctn45Type
        ) {
          this.$message.warning("箱型重复");
          setTimeout(() => {
            this.data.ctn20Type = oldVal;
          }, 100);
        }
      }
    },
    "data.ctn40Type"(newVal, oldVal) {
      if (newVal) {
        if (
          newVal == this.data.ctn20Type ||
          newVal == this.data.ctn40hType ||
          newVal == this.data.ctn45Type
        ) {
          this.$message.warning("箱型重复");
          setTimeout(() => {
            this.data.ctn40Type = oldVal;
          }, 100);
        }
      }
    },
    "data.ctn40hType"(newVal, oldVal) {
      if (newVal) {
        if (
          newVal == this.data.ctn40Type ||
          newVal == this.data.ctn20Type ||
          newVal == this.data.ctn45Type
        ) {
          this.$message.warning("箱型重复");
          setTimeout(() => {
            this.data.ctn40hType = oldVal;
          }, 100);
        }
      }
    },
    "data.ctn45Type"(newVal, oldVal) {
      if (newVal) {
        if (
          newVal == this.data.ctn40Type ||
          newVal == this.data.ctn40hType ||
          newVal == this.data.ctn20Type
        ) {
          this.$message.warning("箱型重复");
          setTimeout(() => {
            this.data.ctn45Type = oldVal;
          }, 100);
        }
      }
    },
    "data.docWorkCtnList": {
      handler(newVal, oldVal) {
        let printArray = [];
        for (let item of newVal) {
          if (item.ctnNo) {
            printArray.push(item.ctnNo);
          }
        }
        this.data.ctnNoDesc = printArray.join(";");
      },
      deep: true,
    },
  },
  created() {
    this.getDefaultBoxSizeOption();
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-checkbox__inner) {
  width: 20px !important;
  height: 20px !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.container {
  :deep(.el-form-item) {
    margin: 0;

    .el-form-item__label {
      font-size: 12px;
    }
  }

  :deep(.el-row) {
    margin-bottom: 8px;
    padding-right: 16px;
  }

  .middle-box {
    border-top: 8px solid #f8f8f8;
    padding: 8px 0;
    display: flex;
    align-items: center;

    .title {
      border-left: 4px solid #2867c9;
      padding-left: 32px;
      font-size: 16px;
      font-weight: 600;
    }

    .btn {
      cursor: pointer;
      color: #0063b9;
      margin: 0 16px 0 8px;
    }

    :deep(.el-checkbox) {
      margin-left: 16px;
    }
  }

  .boxSize {
    padding: 0 20px;
    display: flex;
    margin-bottom: 16px;

    .boxSize-box {
      width: 14%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 32px;

      :deep(.el-input-number) {
        .el-input-number__decrease {
          display: none;
        }

        .el-input-number__increase {
          display: none;
        }

        .el-input__inner {
          padding: 0;
        }
      }

      .box-input {
        flex: 1;
      }

      .middle-icon {
        margin: 0 8px;
      }

      .box-select {
        flex: 1;
      }
    }
  }

  .table-box {
    padding: 0 16px;
  }
}
</style>
